<!--
 * @docName: bankAccountList.vue
 * @Author: mwl
 * @Date: 2023/9/19
 * @LastEditors: zhongxiong
 * @LastEditTime: 14:16
-->
<template>
  <div class='content'>
    <div class='container-div'>
      <a-row :gutter="[16,16]">
        <div class='text' v-show='accountConfig.switchShow'>
          <a-col :span="24">
            <div class='text-div'>
              <span>充值账户配置</span>
              <a-tag color="red" v-if='bizId && bizId == 1' style='margin-left: 10px'>
                仅支持签约渠道公户
              </a-tag>
            </div>
          </a-col>
        </div>
        <a-col>
          <template v-if='publicAccount && publicAccount.length>0'>
            <div class='card-div1' v-for='item in publicAccount'>
              <a-col :span="6">
                <a-card :title="item.accountType == '2'? '私户':'公户'">
                  <p><span class='span'>开户行：{{ item.bankName }}</span></p>
                  <p v-if="item.accountType != '2'"><span class='span'>开户行支行：{{ item.subBankName }}</span></p>
                  <p><span class='span'>账户名称：</span>{{ item.userName }}</p>
                  <p><span class='span'>银行账号：</span>{{ item.bankAccountNo }}</p>
                </a-card>
              </a-col>
            </div>
          </template>
          <template v-else> 
            <a-col :span="6">
              <a-card>
                <a-empty />
              </a-card>
            </a-col>
          </template>
        </a-col>
        <div class='text' v-if='accountConfig.switchShow'>
          <a-col :span="24">
            <a-button type="primary" @click="$emit('clickEvent',{'name':'addRechargeAccount'})">添加充值公户</a-button>
          </a-col>
        </div>
      </a-row>
    </div>
    <div class='container-div' v-if='accountConfig.switchShow'>
      <a-row :gutter="[16,16]">
        <div class='text'>
          <a-col :span="24">
            <div class='text-div'>
              <span>授权充值账户配置</span>
              <a-tag color="red" style='margin-left: 10px'>
                最多授权三个常用账户
              </a-tag>
            </div>
          </a-col>
        </div>
        <a-col>
          <template v-if='authAccount && authAccount.length>0'>
            <div class='card-div' v-for='item in authAccount'>
              <a-col :span="6">
                <a-card title="授权充值账号">
                  <p><span class='span'>开户行：{{ item.subBankName }}</span></p>
                  <p><span class='span'>账户名称：</span>{{ item.userName }}</p>
                  <p><span class='span'>银行账号：</span>{{ item.bankAccountNo }}</p>
                  <p class='p-tips'>
                    <span style='color: #00DB00;' v-if='item.verifyStatus == 1'>授权书生效中</span>
                    <span style='color: #000000;' v-if='item.verifyStatus == 3'>未签署授权书</span>
                    <span style='color: #ee9900;' v-if='item.verifyStatus == 4'>授权书审核中，请您耐心等待</span>
                    <span style='color: #888888;' v-if='item.verifyStatus == 5'>账号已停用</span>
                    <span style='color: #cc0000;' v-if='item.verifyStatus == 6'>授权委托书审核驳回！<br/>{{ item.verifyDesc }}</span>
                  </p>
                  <div class='btn-box'>
                    <!--                    -1取消验证;0-等待认证; 1-认证成功; 2-认证失败; 3-待签署（授权账户）；4-待审核（授权账户）；5-停用（授权账户）；6审核拒绝；7已失效-->
                    <a-button @click='signClick(0,item)' size='small' v-if='item.verifyStatus == 3 ' ghost type='primary'>签署授权书</a-button>
                    <a-button @click='updateFun(item.agreeUrl,item.agreeType)' size='small' v-if='item.verifyStatus == 0 || item.verifyStatus == 1 || item.verifyStatus == 4' type='primary'>下载授权书</a-button>
                    <a-button @click="showClickConfirm(1,'5',item.id)" size='small' v-if='item.verifyStatus == 1' ghost type='danger'>停用此账户</a-button>
                    <a-button @click="showClickConfirm(0,'-15',item.id)" size='small' v-if='item.verifyStatus == 3 || item.verifyStatus == 6' type='danger'>删除授权账户</a-button>
                    <a-button @click='signClick(3,item)' size='small' v-if='item.verifyStatus == 5 || item.verifyStatus == 6 || item.verifyStatus == 7' ghost type='primary'>重新授权</a-button>
                  </div>
                </a-card>
                <!--            <a-card v-else>
                              <a-empty />
                            </a-card>-->
              </a-col>
            </div>
          </template>
          <template v-else>
            <a-col :span="6">
              <a-card>
                <a-empty />
              </a-card>
            </a-col>
          </template>
        </a-col>
        <div class='text'>
          <a-col :span="24">
            <a-button type="primary":disabled='isAccountDisabled' @click="$emit('clickEvent',{'name':'addAuthorizationAccount','a':'4'})">添加常用授权账号</a-button>
          </a-col>
        </div>

      </a-row>
    </div>
    <div class='container-div' v-if='accountConfig.switchShow'>
      <a-row :gutter="[16,16]">
        <div class='text'>
          <a-col :span="24">
            <div class='text-div'>
              <span>授权临时充值账户配置</span>
            </div>
          </a-col>
        </div>
        <a-col>
          <template v-if='tempAuthAccount && tempAuthAccount.length>0'>
            <div class='card-div' v-for='item in tempAuthAccount'>
              <a-col :span="6">
                <a-card title="授权临时充值账号">
                  <p><span class='span'>开户行：{{ item.subBankName }}</span></p>
                  <p><span class='span'>账户名称：</span>{{ item.userName }}</p>
                  <p><span class='span'>银行账号：</span>{{ item.bankAccountNo }}</p>
                  <p class='p-tips'>
                    <span style='color: #00DB00;' v-if='item.verifyStatus == 1'>授权书生效中</span>
                    <span style='color: #000000;' v-if='item.verifyStatus == 3'>未签署授权书</span>
                    <span style='color: #ee9900;' v-if='item.verifyStatus == 4'>授权书审核中，请您耐心等待</span>
                    <span style='color: #888888;' v-if='item.verifyStatus == 5'>账号已停用</span>
                    <span style='color: #cc0000;' v-if='item.verifyStatus == 6'>授权委托书审核驳回！<br/>{{ item.verifyDesc }}</span>
                  </p>
                  <div class='btn-box'>
                    <!--                    -1取消验证;0-等待认证; 1-认证成功; 2-认证失败; 3-待签署（授权账户）；4-待审核（授权账户）；5-停用（授权账户）；6审核拒绝；7已失效-->
                    <a-button @click='signClick(0,item)' size='small' v-if='item.verifyStatus == 3 ' ghost type='primary'>签署授权书</a-button>
                    <a-button @click='updateFun(item.agreeUrl,item.agreeType)' size='small' v-if='item.verifyStatus == 0 || item.verifyStatus == 1 || item.verifyStatus == 4' type='primary'>下载授权书</a-button>
                    <a-button @click="showClickConfirm(1,'5',item.id)" size='small' v-if='item.verifyStatus == 1' ghost type='danger'>停用此账户</a-button>
                    <a-button @click="showClickConfirm(0,'-15',item.id)" size='small' v-if='item.verifyStatus == 3 || item.verifyStatus == 6' type='danger'>删除授权账户</a-button>
                    <a-button @click='signClick(3,item)' size='small' v-if='item.verifyStatus == 5 || item.verifyStatus == 6 || item.verifyStatus == 7' ghost type='primary'>重新授权</a-button>
                  </div>
                </a-card>
              </a-col>
            </div>
          </template>
          <template v-else>
            <a-col :span="6">
              <a-card>
                <a-empty />
              </a-card>
            </a-col>
          </template>
        </a-col>
        <div class='text'>
          <a-col :span="24">
            <a-button type="primary" @click="$emit('clickEvent',{'name':'addTemporaryAccount','a':'5'})">添加临时授权账号</a-button>
          </a-col>
        </div>

      </a-row>
    </div>
    <signTheContractPopups :signConfig='signConfig' @popUpsClick='popUpsClick'></signTheContractPopups>
    <howToSign :howToConfig='howToConfig' @popUpsClick='popUpsClick'></howToSign>
    <popupsPompt :popConfig='popConfig' @popUpsClick='popUpsClick'></popupsPompt>
  </div>
</template>

<script>
import { getBusinessAccountInfo } from '@api/account'
import { getAuthAccountDetail, getChannelInfoLegal, getUpdateAuthAccountStatus } from '@api/authorizationAccount'
import signTheContractPopups from '@views/myAccount/autModules/signTheContractPopups'
import howToSign from '@views/myAccount/autModules/howToSign'
import popupsPompt from '@views/myAccount/autModules/popupsPompt'

export default {
  name: 'bankAccountList',
  components:{
    signTheContractPopups,
    howToSign,
    popupsPompt
  },
  props:{
    accountConfig: { type: Object, default: () => null },
  },
  data(){
    return{
      signConfig:{
        title:'您正在授权公户充值，请完成授权书签署',
        cloudAgreeUrl:'https://zxcloud-test.oss-cn-hangzhou.aliyuncs.com/user/contract/1693465297275_CRM.pdf',
        visible:false,
      },
      howToConfig:{
        title:'请选择您的签署方式',
        howToVisible:false,
        phone:null,
        legalCard:null
      },
      bizId:null,
      popConfig:{
        title:'授权成功',
        visible:false,
        icon:'check-circle',
        content:''
      },
      authAccount:[],//授权账户
      publicAccount:[],//公户信息
      tempAuthAccount:[],//临时账户
      clickList:[
        {
          title: '是否确认删除该账户？',
          content: '',
          okText: '确认删除',
          okType: 'danger',
          cancelText: '我再想想',
        },
        {
          title: '停用后，该账户将无法再作为充值账户为您充值，请确认是否停用？',
          content: '',
          okText: '停用该账户',
          okType: 'danger',
          cancelText: '我再想想',
        }
      ],
      dataDetails:{},
      chooseData:{}
    }
  },
  watch:{
    accountConfig: {
      handler(val) {
        console.log('accountConfig---',val)

      },
      deep: true,
      immediate: true,
    },
  },
  mounted() {
    this.getBusinessAccountInfoFun();
  },
  computed: {
    // 根据状态判断是否可以添加授权账号
    isAccountDisabled() {
      //verifyStatus  是否验证成功 -15删除授权账户；-1取消验证;0-等待认证; 1-是; 2-否; 3-待签署（授权账户）；4-待审核（授权账户）；5-停用（授权账户）；6驳回；7已失效（转账次数超过3次的临时授权账户）
      let arr = [1,3,4,6];
      let newList = this.authAccount.filter(item => {
        return arr.includes(item.verifyStatus)
      });

      return newList.length >= 3;
    },
  },
  methods:{
    //账户列表
    getBusinessAccountInfoFun(){
      let params = {};
      params.masterType = 1;
      this.bizId = this.$route.query.bizId;
      if(this.$route.query.bizId && this.$route.query.bizId !=1){
        params.masterType = 2;  //1渠道  2企业
        params.masterId = this.$route.query.bizId;
      }else{
        params.category = 1;  //1企业  2渠道
      }
      getBusinessAccountInfo(params).then(res => {
        if (res.success) {
          // // 赋值表格数据
          let data = res.result;
          this.authAccount=data.authAccount || [];//授权账户
          this.publicAccount=data.publicAccount || [];//公户信息
          this.tempAuthAccount=data.tempAuthAccount || [];//临时账户

        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //删除，停用方法
    getUpdateAuthAccountStatusFun(type,id){
      let params = {
        id:id,
        verifyStatus:type
      }
      getUpdateAuthAccountStatus(params).then(res => {
        if (res.success) {
          this.$message.warning('操作成功！')
          this.getBusinessAccountInfoFun();
        }else{
          this.$message.warning(res.message)
        }
      })
    },
    //询问弹窗
    showClickConfirm(num,type,id) {
      const that = this;
      //num==0 -删除
      console.log(this.clickList[0])
      this.$confirm({
        title: this.clickList[num].title,
        content: this.clickList[num].content,
        okText: this.clickList[num].okText,
        okType: this.clickList[num].okType,
        cancelText: this.clickList[num].cancelText,
        onOk() {
          that.getUpdateAuthAccountStatusFun(type,id)
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    },
    updateFun(url,type) {
      console.log(typeof url)
      if(type == 1){
        this.upload(url)
      }else if(type == 2){
        let urlList = JSON.parse(url);
        for(let i=0;i<urlList.length;i++){
          this.upload(urlList[i].url)
        }
      }
    },
    //下载
    upload(url) {

      if (url.includes('jpeg') || url.includes('png') || url.includes('jpg') || url.includes('pdf')) {
        this.AddWatermark.addWatermark(url).then(res => {
          const a = document.createElement('a')
          a.href = res.url
          a.download = '授权书' + '.' + res.suffix;
          a.click()
          window.URL.revokeObjectURL(res.url);
        })
      } else {
        this.$message.warning('格式不对，无法下载');
      }
    },
    //签署与重新授权
    signClick(type,data){
      this.chooseData = data;
      if(type == 3){
        let params = {
          id:data.id,
          verifyStatus:type
        }
        getUpdateAuthAccountStatus(params).then(res => {
          if (res.success) {
            let data = res.result;
            this.signConfig.visible = true;
            this.signConfig.cloudAgreeUrl = data.cloudAgreeUrl;
            this.howToConfig.cloudAgreeId = data.cloudAgreeId;
            this.howToConfig.cloudAgreeUrl = data.cloudAgreeUrl;
            this.dataDetails = data;
          }else{
            this.$message.warning(res.message)
          }
        })
      }else{
        let params = {
          id:data.id
        }
        getAuthAccountDetail(params).then(res => {
          if (res.success) {
            let data = res.result;
            this.signConfig.visible = true;
            this.signConfig.cloudAgreeUrl = data.cloudAgreeUrl;
            this.howToConfig.cloudAgreeId = data.cloudAgreeId;
            this.howToConfig.cloudAgreeUrl = data.cloudAgreeUrl;
            this.dataDetails = data;
          }else{
            this.$message.warning(res.message)
          }
        })
      }

    },
    popUpsClick(e){
      //签署预览弹窗
      if(e.name == 'signContract'){
        //电子纸质签署弹窗
      }else if(e.name == 'howToSign'){
        if(this.$route.query.bizId && this.$route.query.bizId !=1){
          let entDetailBase = JSON.parse(localStorage.getItem('entDetailBase'));
          this.howToConfig.phone = entDetailBase.legalPhone;
          this.howToConfig.legalCard = entDetailBase.cardNumber;
        }else{
          this.getChannelLegalFun(this.dataDetails.masterId)
        }
        this.howToConfig.howToVisible = true;
      }else if(e.name == 'signedSuccess'){
        // e.type  1电子，2纸质
        if(e.type == 1){
          this.signConfig.visible = false;
          this.howToConfig.howToVisible = false;
          this.popConfig.visible = true;
        }else{
          this.signConfig.visible = false;
          this.howToConfig.howToVisible = false;
          this.popConfig.visible = true;
          this.popConfig.title = '提交成功';
          this.popConfig.content = '请耐心等待审核结果，审核通过后可通过该账号充值！'
        }
      }else if(e.name == 'handleOk'){
        this.popConfig.visible = false;
        this.getBusinessAccountInfoFun();
      }
    },
    //通过渠道id渠道相关详情
    getChannelLegalFun(masterId){
      getChannelInfoLegal(masterId).then((res) => {
        if(res.success){
          let data = res.result;
          if(data){
            this.howToConfig.phone = data.phone;
            this.howToConfig.legalCard = data.legalCard;
          }
        }else{
          this.$message.warning(res.message);
        }
      })
    },
  }
}
</script>

<style scoped lang='less'>
.btn-box{
  text-align: center;
  button{
    margin: 5px;
  }
}
.text-div{
  margin: 10px 0;
  font-weight: 600;
  color: #000;
}
.card-div1{
  margin-right: 10px;
}
.card-div{
  margin-right: 10px;
  /deep/.ant-card-body{
    height:264px;
  }

  .p-tips{
    padding: 10px 0;
    border-bottom: 1px solid #ccc;
    border-top: 1px solid #ccc;
    font-weight: 600;
    height: 63px;
    span{
      color: #000;
    }
  }
}
</style>
